<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算滚动轴宽度</title>
	</head>
	<body>
		<script type="text/javascript">
			//方法一：
			function getScrollBar (){
				var el = document.createElement('p'),
				styles={
					width:'100px',
					height:'100px',
					overflowY:'scroll'
				},i,scrollBarWidth;
				for(i in styles){
					el.style[i] = styles[i];
				}
				
				document.body.appendChild(el);
				var scrollBarWidth = el.offsetWidth - el.clientWidth;
				el.remove();
				return scrollBarWidth;
			}

			//console.log(getScrollBar());
			
			//方法二
			function getScrollBar2 (){
				var el = document.createElement('p'),
				styles={
					width:'100px',
					height:'100px'
				},i,clientWidth1,clientWidth2,scrollBarWidth;
				for(i in styles){
					el.style[i] = styles[i];
				}
				
				document.body.appendChild(el);
				clientWidth1 = el.clientWidth;
				el.style.overflowY = 'scroll';
				clientWidth2 = el.clientWidth;
				
				var scrollBarWidth = clientWidth1 - clientWidth2;
				el.remove();
				return scrollBarWidth;
			}
			//console.log(getScrollBar2());
			
			//测试浏览器类型
			function getName(){
				var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
			    var isOpera = userAgent.indexOf("Opera") > -1;
			    //判断是否Opera浏览器
			    if (isOpera) {
			        return "Opera"
			    }; 
			    //判断是否Firefox浏览器
			    if (userAgent.indexOf("Firefox") > -1) {
			        return "FF";
			    } 
			    //判断是否chorme浏览器
			    if (userAgent.indexOf("Chrome") > -1){
					return "Chrome";
			    }
			    //判断是否Safari浏览器
			    if (userAgent.indexOf("Safari") > -1) {
			        return "Safari";
			    } 
			    //判断是否IE浏览器
			    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
			        return "IE";
			    }
			    //判断是否Edge浏览器
			    if (userAgent.indexOf("Trident") > -1) {
			        return "Edge";
			    };
			}
			
			alert(getName());
			

		</script>
	</body>
</html>
